import Divider from "@/src/components/divider"
import { Axis, PureStandardProps } from "@/src/consts"
import Global from "@/src/lib/global"
import { Image, View, Text, Button } from "@tarojs/components"
import { PageWarpperContext } from "@/src/components/page-warpper"
import { useContext } from "react"
import Badge from '@/src/components/badge'
// import Taro from '@tarojs/taro'

import "./section.scss"


interface ItemProps {
    icon: string,
    title: string,
    badge?: string,
    url: string,
}

export interface SectionProps extends PureStandardProps {
    title: string,
    indicator?: any
    items: ItemProps[],
}

const Item = (props: ItemProps) => {
    let ctx = useContext(PageWarpperContext)
    let onClick = () => {
        if (!Global.isLogin()) {
            ctx.loginCompentRef?.current?.show()
            return false
        }
        Global.navigateTo(props.url)
    }
    const handleContact = (e) => {
        console.log('eeeee', e)
    }
    return (
        props.url ?
            (
                <View className="section-entry-item" onClick={onClick}>
                    <Image src={Global.loadImage(props.icon)} />
                    <Text>{props.title}</Text>
                    { props.badge && Number.parseInt(props.badge) > 0 ? <Badge text={props.badge} /> : null }
                </View>
            ) : (
                <View className="section-entry-item" >
                    <Image src={Global.loadImage(props.icon)} />
                    <Text>{props.title}</Text>
                    { props.badge && Number.parseInt(props.badge) > 0 ? <Badge text={props.badge} /> : null }

                    <Button openType="contact" onContact={handleContact} style={{ margin: "0", padding: "0", position: "absolute", left: "0", top: "0", width: "100%", height: "100%", backgroundColor: "transparent" }} />
                </View>
            )
    )
}

const Section = (props: SectionProps) => {


    return (
        <View {...props} className={["section", props.className].join(' ')}>

            <View className="section-warp">
                <View className="section-title-container">
                    <View className="section-title">{props.title}</View>
                    <View className="section-indicator">{props.indicator}</View>
                </View>

                <Divider marginTop={30} color="#F2F2F2" />

                <View className="section-content">
                    {
                        props.items.map((p) => {
                            return (
                                <View className="section-content-item-warp">
                                    <Item {...p} />
                                </View>
                            )
                        })
                    }
                    
                </View>
            </View>

        </View>
    )
}

export default Section